<template>
    <div class="post-detail-page">
      <modal title="删除文章" :visible="modalIsVisible" @modal-on-close="modalIsVisible = false" @modal-on-confirm="hideAndDelete">
      <p>确认要删除这篇文章吗</p>
      </modal>
      <article class="w-75 mx-auto mb-5 pb-3" v-if="currentPost">
        <img
          :src="currentImageUrl"
          alt="currentPost.title"
          class="rounded-lg img-fluid my-4"
          v-if="currentImageUrl"
        />
        <h2 class="mb-4">{{ currentPost.title }}</h2>
        <div
          class="user-profile-component border-top border-bottom py-3 mb-5 align-items-center row g-0"
        >
          <div class="col">
            <user-profile
              :user="currentPost.author"
              v-if="typeof currentPost.author === 'object'"
            ></user-profile>
          </div>
          <span class="text-muted col text-right font-italic"
            >发表于：{{ currentPost.createdAt }}</span
          >
        </div>
        <div v-html="currentHtml"></div>
        <div class="btn-group mt-5" v-if="showeditArea">
          <router-link
            type="button"
            :to="{ name: 'create', query: { id: currentPost._id } }"
            class="btn btn-success"
            >编辑</router-link
          >
          <button type="button" class="btn btn-danger" @click="modalIsVisible = true">删除</button>
        </div>
      </article>
    </div>
  </template>
  
  <script lang="ts">
  import store, {
    GolbalDataProps,
    ImageProps,
    PostProps,
    UserProps,
    ResponseType
  } from '@/store'
  import { computed, defineComponent, onMounted, ref } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import { useStore } from 'vuex'
  import MarkdownIt from 'markdown-it'
  import UserProfile from '@/components/UserProfile.vue'
  import Modal from '@/components/Modal.vue'
  import createMessage from '@/hooks/createMessage'
  
  export default defineComponent({
    components: {
      UserProfile,
      Modal
    },
    setup () {
      const store = useStore<GolbalDataProps>()
      const route = useRoute()
      const router = useRouter()
      const md = new MarkdownIt()
  
      const currentId = route.params.id
      const modalIsVisible = ref(false) 
      onMounted(() => {
        store.dispatch('fetchPost', currentId)
      })
  
      const currentPost = computed<PostProps>(() =>
        store.getters.getCurrentPost(currentId)
      )
      //   是否显示 编辑删除区域
      const showeditArea = computed(() => {
        // 判断登录id是否等于作者的id
        const { isLogin, _id } = store.state.user
        if (currentPost.value && currentPost.value.author && isLogin) {
          // 断言
          const postAuthor = currentPost.value.author as UserProps
          return postAuthor._id === _id
        } else {
          return false
        }
      })
      // eslint-disable-next-line vue/return-in-computed-property
      const currentHtml = computed(() => {
        const { content } = currentPost.value
        if (currentPost.value && content) {
          return md.render(content)
        }
      })
  
      const currentImageUrl = computed(() => {
        if (currentPost.value && currentPost.value.image) {
          const { image } = currentPost.value
          return (image as ImageProps).url
        } else {
          return null
        }
      })
      const hideAndDelete = () => {
        modalIsVisible.value = false
        store.dispatch('deletePost', currentId).then((rawData:  ResponseType<PostProps>) => {
          createMessage('删除成功，2秒后跳转到专栏首页', 'success')
          setTimeout(() => {
            router.push({ name:'column', params:{ id: rawData.data.column }})
          },2000)
        })
      }
      return {
        currentImageUrl,
        currentPost,
        currentHtml,
        showeditArea,
        modalIsVisible,
        hideAndDelete
      }
    }
  })
  </script>
  
  <style scoped></style>
  